<template>
  <BaiduIcon
    v-if="props.name == 'baidu'"
    style="position: relative; top: 1px"
    :width="props.width"
    :height="props.height"
  ></BaiduIcon>

  <GoogleIcon
    v-else-if="props.name == 'google'"
    style="position: relative; top: 1px"
    :width="props.width"
    :height="props.height"
  ></GoogleIcon>

  <BingIcon
    v-else-if="props.name == 'bing'"
    style="position: relative; top: 1px"
    :width="props.width"
    :height="props.height"
  ></BingIcon>

  <SougouIcon
    v-else-if="props.name == 'sougou'"
    style="position: relative; top: 1px"
    :width="props.width"
    :height="props.height"
  ></SougouIcon>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "SEIcon",
});
</script>
<script setup>
import BaiduIcon from "./baiduIcon.vue";
import BingIcon from "./bingIcon.vue";
import SougouIcon from "./sougouIcon.vue";
import GoogleIcon from "./googleIcon.vue";

const props = defineProps(["name", "width", "height"]);
</script>

<style lang="scss" scoped></style>
